<template> 
  <el-card class="form-container" shadow="never">
    <el-steps :active="active" finish-status="success" align-center>
      <el-step title="填写NFT基本信息"></el-step>
      <el-step title="填写商品状态及相关信息"></el-step>
      <el-step title="填写商品属性"></el-step>
    </el-steps>
    <product-info-detail v-show="showStatus[0]" v-model="productParam" :is-edit="isEdit" @nextStep="nextStep">
    </product-info-detail>
    <product-sale-detail v-show="showStatus[1]" v-model="productParam" :is-edit="isEdit" @prevStep="prevStep">
    </product-sale-detail>
    <product-attr-detail v-show="showStatus[2]" v-model="productParam" :is-edit="isEdit" @prevStep="prevStep"
      @finishCommit="finishCommit">
    </product-attr-detail>
  </el-card>
</template>
<script>
import ProductInfoDetail from './component/add/ProductInfoDetail.vue';
import ProductSaleDetail from './component/add/ProductSaleDetail.vue';
import ProductAttrDetail from './component/add/ProductAttrDetail.vue';
import { createProduct } from '@/api/product';

import { Storage } from '../../../store/storage';
const defaultProductParam = {
  // children: []
};
export default {
  name: 'blindBoxAdd',
  components: { ProductInfoDetail, ProductSaleDetail, ProductAttrDetail },
  props: {
    isEdit: {
      type: Boolean,
      default: false,
    },
    defaultProductParam: {
      type: Object,
      default: () => Object.assign({}, defaultProductParam),
    }
  },
  data() {
    return {
      active: 0,
      timeOutId: 0,
      productParam: {},
      showStatus: [true, false, false, false]
    }
  },
  beforeDestoryed() {
    clearTimeout(this.timeOutId);
    this.timeOutId = 0;
  },
  created() {
    if (this.isEdit) {

      // getProduct(this.$route.query.id).then(response=>{
      // this.productParam= this.defaultProductParam;
      // });

      let res = Storage.getMarketnft();

      let result = res.filter(value => value.mid == this.$route.query.id);

      this.productParam = result[0];

      console.log(this.productParam);
    }
  },
  methods: {
    hideAll() {
      for (let i = 0; i < this.showStatus.length; i++) {
        this.showStatus[i] = false;
      }
    },
    prevStep() {
      if (this.active > 0 && this.active < this.showStatus.length) {
        this.active--;
        this.hideAll();
        this.showStatus[this.active] = true;
      }
    },
    nextStep() {
      if (this.active < this.showStatus.length - 1) {
        this.active++;
        this.hideAll();
        this.showStatus[this.active] = true;
      }
    },
    finishCommit(isEdit) {
      console.log('isEdit', isEdit);
      this.$confirm('是否要提交该产品', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.productParam.seriesname = this.productParam.tradename;

        if (this.$route.query.id) {
          this.productParam.id = this.$route.query.id;
        }



        createProduct(this.productParam).then(response => {
          this.$message({
            type: 'success',
            message: '提交成功',
            duration: 1000
          });
          this.timeOutId = setTimeout(() => {
            console.log(123);
            this.$router.push("/pms/product");
          }, 1000);
          // location.reload();
        });
      })
    }
  }
}
</script>
<style>
.form-container {
  width: 800px;
}
</style>


